<template>
  <!-- 基于 Element UI 新增和修改弹窗 -->
    <a-drawer
            :title="!dataForm.imgid ? '添加' : '修改'"
            :visible="visible"
            @close="cancel"
            :body-style="{ paddingBottom: '80px' }"
            :width="720"
    >
    <!-- 新增和创建表单表单 -->
    <el-form :model="dataForm" :rules="dataRule"  v-loading="loading" ref="dataForm" @keyup.enter.native="dataSubmit()" label-width="80px" style="padding: 0px 10px;margin: 0px 50px">
    <el-form-item label="标题" >
      <el-input v-model="dataForm.imgname" placeholder="标题" size="small"></el-input>
    </el-form-item>
      <el-form-item label="描述" >
        <el-input type="textarea" v-model="dataForm.content" placeholder="" size="small"></el-input>
      </el-form-item>
    <el-form-item label="图片" >
      <upload-img text="图片" :fileListValue="dataForm.imgpath" v-model="dataForm.imgpath" :content="{'compress':true}"/>
    </el-form-item>
    <el-form-item label="版块"  prop="imgblock">
      <el-select v-model="dataForm.imgblock" placeholder="请选择" class="width100" filterable>
        <el-option
          v-for="item in options.block"
          :key="item.value"
          :value="item.value"
          :label="item.label">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="类型" prop="imgtype">
      <el-select v-model="dataForm.imgtype" placeholder="请选择" class="width100" filterable >
        <el-option
          v-for="item in options.type"
          :key="item.value"
          :value="item.value"
          :label="item.label">
        </el-option>
      </el-select>
    </el-form-item>
      <el-form-item label="排序" >
        <el-input v-model="dataForm.sort" placeholder="" size="small"></el-input>
      </el-form-item>
      <el-form-item label="跳转" >
      <el-input v-model="dataForm.imgadderss" placeholder="H5为H5链接，App为App的游戏玩家平台id" size="small"></el-input>
    </el-form-item>
    </el-form>
        <div :style="{position: 'absolute',right: 0,bottom: 0,width: '100%', borderTop: '1px solid #e9e9e9',padding: '10px 16px',background: '#fff',textAlign: 'right',zIndex: 1,}">
            <el-button @click="cancel()" :style="{ marginRight: '8px' }">取消</el-button>
            <el-button type="primary" @click="submit()">确定</el-button>
        </div>
  </a-drawer>
</template>

<script>
    import api from '@/api/api'
    import uploadImg from '@/components/Upload/uploadImg'
    export default {
    components: {
      uploadImg
    },
    data () {
      return {
        visible: false,
        loading:false,
        options:{
          block:[
            {value: 0, label: '首页'},
            {value: 1, label: '云玩'},
            {value: 2, label: 'PC推荐'},
            {value: 3, label: 'PC云玩'},
            {value: 5, label: '开屏页'},
          ],
          type:[
            {value: 1, label: '无跳转'},
            {value: 2, label: '跳转H5'},
            {value: 3, label: '跳转App'},
          ]
        },
        dataForm: {
          imgid: 0,
          imgname: '' ,
          imgpath: '' ,
          imgtype: '' ,
          imgblock: '' ,
          imgforeignkey: '' ,
          imgadderss: '' ,
          content:'',
          sort:0,
          createtime: '' ,
          modifytime: ''
        },
        dataRule: {
          imgname: [
            { required: true, message: '图片名  为必填项', trigger: 'blur' }
          ],
          imgpath: [
            { required: true, message: '图片路径  为必填项', trigger: 'blur' }
          ],
          imgtype: [
            { required: true, message: '图片类型(1首页轮播图,2EOS专区)  为必填项', trigger: 'blur' }
          ],
          imgblock: [
            { required: true, message: '图片版块，0，首页，1，云玩  为必填项', trigger: 'blur' }
          ],
          imgforeignkey: [
            { required: true, message: '图片外键id  为必填项', trigger: 'blur' }
          ],
          imgadderss: [
            { required: true, message: '', trigger: 'blur' }
          ],
          createtime: [
            { required: true, message: '创建时间  为必填项', trigger: 'blur' }
          ],
          modifytime: [
            { required: true, message: '修改时间  为必填项', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      init (id) { // 初始化表单验证规则
        this.dataForm.imgid = id || undefined
        this.visible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.imgid){
              this.loading = true
            api.post('rest/vabc/imgEntity/info',{imgid:this.dataForm.imgid}).then(res => {
                this.dataForm = res;
            }).finally(() => {
                this.loading = false
            });
          }
        })
      },
      // 表单数据提交
      submit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.loading = true
            let postData=Object.assign({},this.dataForm)
            if (!this.dataForm.imgid){
                api.post('rest/vabc/imgEntity/save',postData).then(res =>{
                    this.$message.success("创建成功")
                    this.$parent.getDataList()
                    this.visible = false
                    this.reset()
                }).catch(()=>{}).
                finally(() => {
                    this.loading = false
                });
            }else{
                api.post('rest/vabc/imgEntity/update',postData).then(res =>{
                    this.$message.success("保存成功")
                    this.$parent.getDataList()
                    this.visible = false
                    this.reset()
                }).finally(() => {
                    this.loading = false
                });
            }
          }
        })
      },
     cancel(){
        this.visible = false
        this.reset()
    },
      callbackUrl(v){
       // console.error(v)
      },
    reset(){
        this.$refs.dataForm.resetFields()
        this.$data.dataForm=JSON.parse(JSON.stringify(this.$options.data().dataForm))
        //图片回写
        //this.$refs["childData"].fileList=[]
    }
    }
  }
</script>
